@use '@/style/variables.scss' as vars;

/* 液态玻璃卡片样式 */
.glass-card {
  border-radius: vars.$radius-xl;
  padding: vars.$spacing-xl;
  margin-bottom: vars.$spacing-xl;
  background: vars.$bg-glass;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid vars.$border-glass;
  box-shadow: vars.$shadow-lg;
  transition: all vars.$transition-normal;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    z-index: -1;
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: vars.$shadow-xl;
    background: vars.$bg-glass-hover;
  }
}

.glass-card-header {
  font-size: vars.$font-size-xl;
  font-weight: 600;
  margin-bottom: vars.$spacing-lg;
  color: vars.$text-primary;
  padding-bottom: vars.$spacing-md;
  border-bottom: 1px solid vars.$border-glass;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.glass-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: vars.$spacing-xl;
  background: vars.$bg-glass;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: vars.$radius-lg;
  overflow: hidden;
  box-shadow: vars.$shadow-lg;

  th {
    background: vars.$bg-glass-active;
    font-weight: 600;
    color: vars.$text-primary;
    text-align: left;
    padding: vars.$spacing-md vars.$spacing-lg;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  td {
    padding: vars.$spacing-md vars.$spacing-lg;
    border-bottom: 1px solid vars.$border-glass;
    color: vars.$text-secondary;
  }

  tr:last-child td {
    border-bottom: none;
  }

  tr:hover {
    background: vars.$bg-glass-hover;
  }
}

/* 进度条样式 */
.usage-bar-container {
  margin-top: vars.$spacing-md;
}

.usage-bar {
  height: 12px;
  background: vars.$bg-glass;
  border-radius: vars.$radius-sm;
  overflow: hidden;
}

.usage-bar-fill {
  height: 100%;
  border-radius: vars.$radius-sm;
  transition: width vars.$transition-slow;
}

.usage-bar-fill.danger {
  background: linear-gradient(90deg, vars.$danger-color, rgba(vars.$danger-color, 0.8));
  box-shadow: 0 0 8px rgba(vars.$danger-color, 0.5);
}

.usage-bar-fill.warning {
  background: linear-gradient(90deg, vars.$warning-color, rgba(vars.$warning-color, 0.8));
  box-shadow: 0 0 8px rgba(vars.$warning-color, 0.5);
}

.usage-bar-fill.success {
  background: linear-gradient(90deg, vars.$success-color, rgba(vars.$success-color, 0.8));
  box-shadow: 0 0 8px rgba(vars.$success-color, 0.5);
}
